import { useState, useEffect } from "react"

const A = props => {
  const [num, setNum] = useState(1)
  const [count, setCount] = useState(1)

  // vue3中有一个watchEffect，和useEffect是一样的，只不过，不需要依赖数组
  // useEffect(() => {
  //   console.log("fn1...");
  //   return () => {
  //     console.log("fn2...");
  //   }
  // }, [num, count])

  // 开一个定时器，也是一个副作用
  // 这个副作用没有使用useEffect包起来
  // 如果这个组件死了，这个定时没有关。
  // setInterval(() => {
  //   // todo...
  // },100)

  useEffect(() => {
    let t = setTimeout(() => {
      // todo...
      setNum(num+1)
    }, 1000)
    return () => {
      clearInterval(t)
    }
  },[num])

  return (
    <div>
      <h2>函数式组件</h2>
      <h3>{num}</h3>
      <button onClick={() => setNum(num + 1)}>+1</button>
      <hr />
      <h3>{count}</h3>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  )
}

export default A;
